<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
            <!-- 开发环境版本，包含了有帮助的命令行警告 -->
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
</head>
<body>
    <!-- 
        路由参数的传递 
        1.利用router-link进行路由的传参  
            通过方法切换路由之后，地址栏是   http://127.0.0.1:5500/vue_router3.html#/news/001
            获取这个参数：$route.params.id来获取

        2.可以通过JS来实现路由的跳转
        $router.push()方法来实现路由的跳转
        $router.go()

    
    -->
    <div id="box">
       <!-- 创建一些跳转的按钮 通过js来跳转-->
       <div>
            <input type="button" value="跳转的首页" @click="fn1()">
            <input type="button" value="跳转到新闻页" @click="fn2()">
            <input type="button" value="跳转到用户" @click="fn3()">
            <input type="button" value="前进一页" @click="fn4()">
            <input type="button" value="前进一页" @click="fn5()">
            <input type="button" value="后退一页" @click="fn6()">
            <input type="button" value="后退一页" @click="fn7()">
       </div>
        <!-- 路由的内容显示在router-view中 -->
        <router-view></router-view>
    </div>


    <script>
        //创建路由
        const router = new VueRouter({
            routes:[
                {
                    path:'/index/:id',
                    name:'index', //路由的名称，可先的属性，定义之后可以使用这个name来实现跳转的
                    component:{  //路由显示的组件
                        template:'<div>首页:{{$route.params.id}}</div>' //组件的模板
                    }
                },
                {
                    path:'/news/:id/',
                    name:'news',
                    component:{
                        template:'<div>新闻:{{$route.params.id}}</div>'
                    }
                },
                {
                    path:'/user',
                    name:'user',
                    component:{
                        template:'<div>用户:{{}}</div>'
                    }
                }
            ]
        })

        let vm = new Vue({
            el:'#box',
            data:{

            },
            router,
            methods: {
                fn1(){
                    //通过路由的名称实现一个跳转
                    this.$router.replace({name:'index',params:{id:Math.random()}})
                }
            }


        })






        // // 定义路由的组件
        // const Home = {template:'#home'}
        // const News = {template:'#news'}
        // const Login = {template:'#login'}
        // const Reg = {template:'#reg'}
        // const NewsDetail = {template:'#NewsDetail'}

        // //定义路由
        // const routes = [
        //     {path:'/',redirect:'/home'},
        //     {
        //         path:'/home',
        //         component:Home,
        //         children:[
        //             {path:'/home/login',component:Login},
        //             {path:'/home/reg',component:Reg}
        //         ]
        //     },
        //     {path:'/news',component:News},
        //     {path:'/news/:id',component:NewsDetail}
        // ]

        // //创建vueRouter的实例
        // const router = new VueRouter({
        //     routes
        // })

        // //创建vue的实例
        // var vm = new Vue({
        //     el:'#box',
        //     data:{},
        //     router
        // })

    </script>

</body>
</html>